<script lang="ts" setup>
import { reactive, defineAsyncComponent, ref } from 'vue'
import PhoneForm from '@/components/form/PhoneForm.vue'
import { useDepositRefundStore } from '@/store/modules/depositRefund'

defineOptions({
  name: 'DepositRecord'
})
const refundTabs = defineAsyncComponent(() => import('@/components/tabs/DepositRefundTabs.vue'))
const refundStore = useDepositRefundStore()
const form = reactive(refundStore.form)
const handleFormSearch = () => {
  refundStore.setCurrentPage(1)
  refundStore.updateFormData(form)
  refundStore.refreshTable()
}
/** 查看订单详情 */
const OrderInfoRef = ref<InstanceType<typeof OrderInfo> | null>(null)
const OrderInfo = defineAsyncComponent(() => import('@/components/dialog/OrderInfo.vue'))

const seeOrderInfo = (orderId: string, userId: string) => {
  OrderInfoRef.value?.setId(orderId, userId)
  OrderInfoRef.value?.open()
}
//打开退款申请
const RefundApplicationDialog = defineAsyncComponent(
  () => import('@/components/dialog/DepositRefundApplication.vue')
)
const RefundApplicationDialogRef = ref<InstanceType<typeof RefundApplicationDialog> | null>(null)
const openRefundApplication = (
  phone?: string,
  orderId?: string,
  orderType?: string,
  userId?: number,
  applyAmount?: number
) => {
  if (phone && orderId && orderType && userId && applyAmount) {
    RefundApplicationDialogRef.value?.setData(phone, orderId, orderType, userId, applyAmount)
  }
  RefundApplicationDialogRef.value?.open()
}
</script>

<template>
  <div class="xy-container">
    <div>
      <el-button type="primary" @click="openRefundApplication()" mb-20>提交退款申请</el-button>
    </div>
    <phone-form v-model="form" @search="handleFormSearch">
      <template #select>
        <el-form-item label="退款提交人" prop="submitter">
          <el-select v-model="form.submitter" style="width: 100px">
            <el-option label="不限" value="" />
            <el-option label="用户" value="0" />
            <el-option label="客服" value="1" />
          </el-select>
        </el-form-item>
      </template>
    </phone-form>
    <refund-tabs @show-info="seeOrderInfo" @resubmit="openRefundApplication" />
    <order-info ref="OrderInfoRef" />
    <refund-application-dialog ref="RefundApplicationDialogRef" />
  </div>
</template>

<style scoped></style>
